<script setup>
import { onMounted, reactive,ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios';
// 定义一个数据总条数
let total = ref(0);
//
const tableData = ref([])








// 定义一个方法当页面加载后立马执行的代码
onMounted(()=>{
  getList();
})
// 定义一个全局的查询参数变量
const queryInfo = ref({
  pageNum:1,
  pageSize:5
})


const getList = ()=>{
  // 使用axios调用后端接口获取数据
  axios.get('/CourseBuyController/selectCourseBuyList',{
    params: queryInfo.value
  })
      .then(res=>{
        let result =  res.data;
        if(result.code==1){
          // 更新总条数
          total.value=result.data.total;
          tableData.value=result.data.list;
        }else{
          console.log('获取分类列表失败')
        }
      })

}






// 分页


</script>


<template>
  <div class="about">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="buyId" label="编号" width="80" />
      <el-table-column prop="courseId" label="课程编号" width="120" />
      <el-table-column prop="memberId" label="会员编号" width="120" />
      <el-table-column prop="buyPrice" label="购买价格" width="120" />
      <el-table-column prop="buyTime" label="购买时间" width="120" />
      <el-table-column prop="buyString" label="购买状态" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.buyState==2" type="success">已购买</el-tag>
          <el-tag v-if="scope.row.buyState==1" type="danger">未购买</el-tag>
          <el-tag v-if="scope.row.buyState==3" type="info">取消</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>


</template>

<style scoped>
</style>
